<template>
  <div class="container">
    <div class="header">
      <div class="title">船舶概览</div>
      <div class="time">
        <img src="../../static/images/icon-time.png" alt="">
        <span>{{ currentYearMonth1 }}-{{ currentYearMonth2 }}</span>
      </div>
    </div>
    <div class="unit">单位:艘</div>
    <div class="content">
      <div class="title">
        <div>航道部门管理工作船舶详情</div>
        <img src="../../static/images/Subtract.png" alt="" @click="handleShow('first')" />
      </div>
      <div class="amount">
        <div class="info">
          <img src="../../static/images/ship-bg-icon.png" alt="">
          <div class="detail">
            <div class="name">航道管理工作船舶数量</div>
            <div class="value">{{ departWorkShipNum }}</div>
          </div>
        </div>       
      </div>
      <div class="subtitle">各区域中心管理工作船舶分布图</div>
      <!-- 分布图 -->
      <div id="firstChart" class="first-chart"></div>
      <div class="subtitle">各区域中心管理工作船舶详情</div>
      <div class="table">
        <table
          style="border-collapse: collapse"
          cellspacing="0"
          cellpadding="0"
        >
          <thead>
            <tr>
              <th style="width: 150px">区域中心</th>
              <th style="width: 160px">工作船舶数量(艘)</th>
            </tr>
          </thead>
        </table>
        <div class="tbody">
          <table
            style="border-collapse: collapse;border-spacing: 0;"
            cellspacing="0"
            cellpadding="0"
          >
            <tbody>
              <tr v-for="item in tableList" :key="item.name">
                <td style="width: 150px">
                  <strong>{{ item.name }}</strong>
                </td>
                <td style="width: 160px">
                  {{ item.value }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div>地市船舶情况</div>
        <img src="../../static/images/Subtract.png" alt="" @click="handleShow('second')" />
      </div>
      <!-- 船舶情况 -->
      <div id="secondChart" class="second-chart"></div>
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div> 
    <!-- 弹窗 -->    
    <van-dialog 
      v-model:show="isShow" 
      confirm-button-text="我知道了" 
      confirm-button-color="#2D78ED"
    >
      <div class="dialog-title">{{ dialogTitle }}</div>
      <div class="dialog-content">{{ dialogContent }}</div>
    </van-dialog>
  </div>
</template>

<script setup>  
  import { ref, reactive, onMounted } from "vue";

  // 引入api
  import {
    getShipsituationSum, //船舶概况（静态）
    regionDistributionChart, //区域中心管辖工作船分布图
    cityshipsData, //地市船舶情况图
    getShipNum, //获取地市船舶数量
  } from "../../utils/apis";
  

  import * as echarts from 'echarts/core';
  import {
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    DataZoomComponent
  } from 'echarts/components';
  import { BarChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';

  echarts.use([
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    DataZoomComponent,
    BarChart,
    CanvasRenderer
  ]);

  const departWorkShipNum = ref("");
  const tableList = ref([]);

  const xAxisFirstData = ref([]);
  const seriesFirstData = ref([]);
  const regionDistributionChartFn = () => {
    regionDistributionChart().then((res) => {
      if(res.code === 200 && res.data.length){
        let data = res.data[0];
        xAxisFirstData.value = data.region;
        tableList.value = data.region.map((name,index) => ({
          name,
          value:data.workShipNum[index]
        }));
        let arr = [];
        for(let key in data){         
          if(key !== "region"){
            let obj = {
              name: '',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              stack: 'Ad',
              barWidth: 10,
              data: []
            };
            // workShipNum总数
            // beaconWorkShipNum航标船
            // beaconFastShipNum巡标快船
            // engineerShipNum工程船
            // otherShipNum其他船
            // measureShipNum测量船
            // trafficShipNum交通船
            // bargeShipNum趸船
            if(key === "workShipNum"){
              // obj.name = "区域中心工作船舶";
              // obj.data = data[key];
              // arr.push(obj);
            }else if(key === "beaconWorkShipNum"){
              obj.name = "航标船";
              obj.data = data[key];
              arr.push(obj);
            }else if(key === "beaconFastShipNum"){
              obj.name = "巡标快船";
              obj.data = data[key];
              arr.push(obj);
            }else if(key === "engineerShipNum"){
              obj.name = "工程船";
              obj.data = data[key];
              arr.push(obj);
            }else if(key === "otherShipNum"){
              obj.name = "其他类型船";
              obj.data = data[key];
              arr.push(obj);
            }else if(key === "bargeShipNum"){
              obj.name = "趸船";
              obj.data = data[key];
              arr.push(obj);
            }else if(key === "measureShipNum"){
              obj.name = "测量船";
              obj.data = data[key];
              arr.push(obj);
            }else if(key === "trafficShipNum"){
              obj.name = "交通船";
              obj.data = data[key];
              arr.push(obj);
            }
          }
        }
        seriesFirstData.value = arr;
        initFirstChart();
      }
    });
  };
  const initFirstChart = () => {
    let firstChart = echarts.getInstanceByDom(document.getElementById("firstChart"));
    if(firstChart == null){
      firstChart = echarts.init(document.getElementById('firstChart'));
    }    
    let option;
    option = {
      tooltip: {
        // trigger: 'axis',
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        textStyle: {
          fontSize: 12
        },
        itemGap: 8,
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10
      },
      grid: {
        top: '20%',
        left: '5%',
        right: '60',
        bottom: '5%',
        containLabel: true
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          startValue: 0,
          endValue: 7,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: xAxisFirstData.value,
          name: '区域中心', 
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "10px",
            color: "rgba(0,0,0,0.45)",
          }, 
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              show: false,
            },
          },      
        }
      ],
      yAxis: [
        {
          type: 'value', 
          name: '船舶数（艘）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "10px",
            color: "rgba(0,0,0,0.45)",
          },
          nameGap: 15,        
        }
      ],
      series: seriesFirstData.value
    };

    option && firstChart.setOption(option);
  };

  const xAxisSecondtData = ref([]);
  const seriesSecondtData = ref([]);
  const cityshipsDataFn = () =>{
    getShipNum().then((res) => {
      if(res.code === 200 && res.data.length){
        // let data = res.data[0];
        // xAxisSecondtData.value = data.region;
        // let arr = [];
        // for(let key in data){         
        //   if(key !== "region"){
        //     let obj = {
        //       name: '',
        //       type: 'bar',
        //       emphasis: {
        //         focus: 'series'
        //       },
        //       stack: 'Ad',
        //       barWidth: 10,
        //       data: []
        //     };
        //     if(key === "totalShipSum"){
        //       // obj.name = "船舶总数";
        //       // obj.data = data[key];
        //       // arr.push(obj);
        //     }else if(key === "roPassengerShip"){
        //       obj.name = "客渡船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }else if(key === "highSpeedPassengerShip"){
        //       obj.name = "高速客船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }else if(key === "passengerShip"){
        //       obj.name = "普通客船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }else if(key === "dangerousGoodsShip"){
        //       obj.name = "危险品船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }else if(key === "dryCargoShip"){
        //       obj.name = "干货船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }else if(key === "selfUnloadingSandShip"){
        //       obj.name = "自卸沙船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }else if(key === "containerShip"){
        //       obj.name = "集装箱船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }else if(key === "otherShip"){
        //       obj.name = "其他货船";
        //       obj.data = data[key];
        //       arr.push(obj);
        //     }
        //   }
        // }
        // seriesSecondtData.value = arr;

        let data = res.data;
        let arr = [];
        data.forEach((item) => {
          xAxisSecondtData.value.push(item.cityName);
          arr.push(item.shipNum);
        });
        seriesSecondtData.value = [
          {
            name: "船舶数量",
            data: arr,
            type: 'bar',
            barWidth: 10,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              color: '#6B9BFD'
            },
          }
        ];
        initSecondChart();
      }
    });
  };
  const initSecondChart = () => {
    let secondChart = echarts.getInstanceByDom(document.getElementById("secondChart"));
   
    if(secondChart == null){
      secondChart = echarts.init(document.getElementById('secondChart'));
    }   
    
    var option;
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        textStyle: {
          fontSize: 12,
        },
        itemGap: 4,
        icon: 'circle',
        itemWidth: 6,
        itemHeight: 6,
        left:'20px'
      },
      grid: {
        top: '15%',
        left: '5%',
        right: '65',
        bottom: '5%',
        containLabel: true
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          // maxValueSpan: 10,
          startValue: 0,
          endValue: 7,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: xAxisSecondtData.value,
          name: '行政区域', 
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "10px",
            color: "rgba(0,0,0,0.45)",
          },   
        }
      ],
      yAxis: [
        {
          type: 'value', 
          name: '单位：艘',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "10px",
            color: "rgba(0,0,0,0.45)",
            padding: [0,30,0,0]
          },
          nameGap: 15,        
        }
      ],
      series: seriesSecondtData.value
    };

    option && secondChart.setOption(option);
  };

  const getShipsituationSumFn = () => {
    getShipsituationSum().then((res) => {
      if(res.code === 200 && res.data.length){
        departWorkShipNum.value = res.data[0].departWorkShipNum;
      }
    });
  };

  // 弹窗
  const isShow = ref(false);
  const dialogTitle = ref("");
  const dialogContent = ref("");
  const handleShow = (val) => {
    let firstChart = echarts.getInstanceByDom(document.getElementById("firstChart"));
    firstChart.dispatchAction({
      type: 'hideTip'
    });
    // let secondChart = echarts.getInstanceByDom(document.getElementById("secondChart"));
    // secondChart.dispatchAction({
    //   type: 'hideTip'
    // });
    if(val === "first"){
      dialogTitle.value = "航道管理工作船舶数量";
      dialogContent.value = "航道部门辖区内的工作船舶总数量（实现按区域中心进行展示）";
    }else{
      dialogTitle.value = "地市船舶情况";
      dialogContent.value = "地方部门管辖的船舶数量";
    }
    isShow.value = true;
  };

  //获取日期
  const currentYearMonth1 = ref("");
  const currentYearMonth2 = ref("");

  onMounted(() => {
    if(sessionStorage.getItem("watermarkTxt")){
      //加水印
      watermark.init({ 
        watermark_x: -30, // 水印起始位置x轴坐标
        watermark_y: -20, // 水印起始位置Y轴坐标
        watermark_x_space: 20, // 水印x轴间隔
        watermark_y_space: 80, // 水印y轴间隔
        watermark_alpha: 0.07, // 水印透明度
        watermark_fontsize: '14px', // 水印字体大小
        watermark_width: 100, // 水印宽度
        watermark_height: 30,
        watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
        watermark_angle: 25, // 水印倾斜度数
        watermark_rows: 0, // 水印行数
        watermark_cols: 0, // 水印列数
        watermark_font: '微软雅黑', // 水印字体
        watermark_color: 'black', // 水印字体颜色 
      });
    }
    
    currentYearMonth1.value = new Date().getFullYear() + ".01";
    currentYearMonth2.value = new Date().format("yyyy.MM");

    getShipsituationSumFn();    
    regionDistributionChartFn();
    cityshipsDataFn();       
  });
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
      .title {
        color: #262626;
        font-size: 18px;
        font-weight: 500;
        padding: 12px 0px 10px 20px;
        position: relative;
      }
      .time {
        display: flex;
        align-items: center;
        color: #8C8C8C;        
        font-size: 14px;
        padding-right: 20px;
        img{
          width: 18px;
          height: 18px;
          padding-right: 5px;
        }
      }
    }
    .unit {
      display: flex;
      flex-direction: row-reverse;
      padding: 8px 20px 8px 0;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }
    .content{
      background-color: #fff;
      border-radius: 8px;
      margin: 0px 20px 20px 20px;
      .title{
        color: #262626;
        font-size: 16px;
        font-weight: 500;
        position: relative;       
        padding: 16px 0;
        margin: 0 16px;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
          width: 16px;
          height: 16px;
        }
      }
      .amount{
        display: flex;        
        .info{
          width: 100%;
          height: 80px;
          background-image: url(../../static/images/ship-bg.png);
          background-repeat: no-repeat;
          background-size: 100% 80px;
          display: flex;
          align-items: center;
          margin: 16px;
          img{
            width: 42px;
            height: 42px;
            margin: 0 16px;
          }
          .detail{
            display: flex;
            flex-direction: column;
            .name{
              font-size: 14px;
              color: #595959;
            }
            .value{
              font-size: 24px;
              font-weight: 800;
              color: #0473DE;
            }
          }
        }
      }
      .subtitle{
        font-size: 14px;
        font-weight: 500;   
        color: #262626;
        position: relative; 
        padding-left: 24px;       
      }
      .subtitle::before{
        content: '';
        background-color: #2D78ED;
        position: absolute;
        top: 55%;
        left: 4%;
        height: 14px;
        width: 4px;
        transform: translateY(-50%);
      }
      .first-chart{
        height: 360px;
        margin: 10px 0;
      }
      .second-chart{
        height: 360px;
        margin: 10px 0;
      }
      .table {
        margin: 16px;
        overflow: hidden;
        padding-bottom: 10px;
        th {
          padding: 4px;
          border: 1px solid #d9d9d9;
          font-size: 16px;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          background-color: #f8f9fb;
        }
        .tbody {
          height: 100px; /* 设置表格体容器的高度 */
          overflow-y: auto; /* 启用垂直滚动条 */
          // width: calc(110% - 24px);
        }
        .tbody {
          th,
          td {
            padding: 4px;
            border: 1px solid #d9d9d9;
            font-size: 14px;
            font-weight: 400;
            color: #595959;
            text-align: center;
          }
        }
      }
    }
    .source{
      text-align: center;
      padding: 5px 0;
      color: #8C8C8C;
      .name{
        margin-bottom: 5px;
      }
    }
    .dialog-title{
      text-align: center;
      padding: 20px 0;
      font-size: 16px;
      font-weight: 500;
      color: #000000;
    }
    .dialog-content{
      text-align: center;
      padding: 0 20px 20px 20px;
      font-size: 14px;
      font-weight: 400;
    }
    :deep(.van-dialog__content){
      min-height: 118px;
      max-height: 293px;
      overflow-y: scroll;
    }
  }
</style>